<template>
  <div class="user">
    <template>
      <el-table size="mini"
                :data="tableData"
                style="width: 100%;">
        <el-table-column label="游戏图片" width="150" align="center">
          <template slot-scope="scope">
            <div class="singer-img">
              <img :src="getUrl(scope.row.pic)" style="width:150px;"/>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            label="游戏名称"
            prop="name"
            width="150">
        </el-table-column>
        <el-table-column label="地区" prop="area" width="100">
        </el-table-column>
        <el-table-column
            label="售价"
            prop="price"
            width="100">
        </el-table-column>
        <el-table-column
            label="最低价格"
            prop="lastprice">
        </el-table-column>
        <el-table-column
            label="销售量"
            prop="count">
        </el-table-column>
        <el-table-column
            label="游戏简介"
            prop="introduction">
        </el-table-column>
        <el-table-column
            align="right">
          <template slot="header" slot-scope="scope">
            <el-input
                v-model="search"
                size="mini"
                placeholder="根据游戏名称搜索"
                style="margin-top: 40px"/>
            <el-button type="primary" size="mini" round style="margin-top: 20px" @click="adduser">添加游戏</el-button>
          </template>
          <template slot-scope="scope">

            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <div class="block">
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage1"
          :page-size="5"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>

    <div class="register">
      <el-dialog :visible.sync="dialogFormVisible" width="40%" height="300px">
        <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
          <el-form-item label="游戏名称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="游戏简介" prop="introduction">
            <el-input v-model="form.introduction"></el-input>
          </el-form-item>
          <el-form-item label="游戏价格" prop="price">
            <el-input-number v-model="form.price" :min="1" :max="1000" label="游戏价格"></el-input-number>
          </el-form-item>
          <el-form-item label="游戏最低价格" prop="lastprice">
            <el-input-number v-model="form.lastprice" :min="1" :max="1000" label="游戏最低价格"></el-input-number>
          </el-form-item>
          <el-form-item label="游戏地区">
            <el-select v-model="form.area" placeholder="请选择游戏地区">
              <el-option label="国区" value="国区"></el-option>
              <el-option label="俄区" value="俄区"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('form')">添加</el-button>
            <el-button @click="resetForm('form')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {getallgames,gamesearch,addgame,deletegame} from "../api";
import {mixin} from "../mixins";
export default {
  inject:["reload"],
  mixins: [mixin],
  name: "GameMannage",
  data() {
    return {

      formLabelWidth: '120px',
      tableData: [],
      total: 0,
      search: '',
      currentPage1: 1,
      dialogFormVisible: false,
      form:{
        name:'',
        introduction:'',
        area: '',
        price: '100',
        lastprice: '100',
      },
      rules: {
        name: [
          { required: true, message: '请输入游戏名称', trigger: 'blur' },
          { min: 5, max: 13, message: '长度在 5 到 13 个字符', trigger: 'blur' }
        ],
        introduction: [
          { required: true, message: '请输入游戏简介', trigger: 'blur' },
          { min: 5, max: 50, message: '长度在 5 到 50 个字符', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      deletegame(row.id).then((res)=>{
        this.$message.success("删除成功")
        this.reload();
      })
    },
    getsex(sex){
      if(sex===1){
        return '男';
      }else{
        return '女';
      }
    },
    //当前页
    handleCurrentChange(val) {
      this.tableData = [];
      getallgames(val).then((res)=>{
        this.tableData = res.data.records;
      })

    },

    adduser(){
      this.dialogFormVisible = true
    },
    submitForm(form) {
      console.log(this.form)
      this.$refs[form].validate((valid) => {
        if (valid) {
          addgame(this.form).then((res)=>{
            this.dialogFormVisible = false
            this.$message.success("添加成功")
            this.reload();
          })
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  mounted() {
    getallgames(this.currentPage1).then((res)=>{
      this.tableData = res.data.records;
      this.total = res.data.total
    })
  },
  watch:{
    search : function (val,oldVal){
      gamesearch(this.currentPage1,val).then((res)=>{
        this.tableData = res.data.records;
        this.total = res.data.total;
      })
    }
  }
}
</script>

<style scoped>
.user{
  height: 300px;
}
.register{
  width: 200px;
  height: 200px;
}
>>>.el-dialog {
  width: 35%;
}
.block{
  padding: 20px 0;
}
h2{
  padding: 0;
  margin: 0;
}
.el-input{
  /*width: 30px;*/
}
</style>
